<template>
  <div class="printDetails-wrap">
    <div class="content">
      <p>号牌号码：{{carNum}}</p>
      <p v-if="type ===3 || orderType">
        提交时间：
        <!-- <span>{{times.o}}</span>
        <span>{{times.t}}</span> -->
        <span>{{createTime}}</span>
        <span>{{upTimeSub}}</span>
      </p>
      <p v-else>
        预约时间：
        <span>{{upTime}} </span>
        <span>{{upTimeSub}}</span>
      </p>
      <AQrcode v-if="isDrow" :bQrUrl="bQrUrl"></AQrcode>

      <!-- <VueQr v-if="isDrow == true" :size="200" :logoSrc="qrcodeVue.imageUrl" :text="qrcodeVue.text"></VueQr> -->

      <p class="text">凭此二维码到单据打印处打印单据</p>
    </div>
    <div class="tips">
      <p>温馨提示：</p>
      <p v-if="type && !orderType">
        单据打印方式为自助打印，请您前往检测站单据打印处，使用自助打印一体机完成打印，共需打印单据5份（柴油车6份），其中收款收据2份，申请表1份，委托单1份，外检单1份，尾气检测单1份（只限柴油车），单据打印完成后请您直接上线进行检查。
      </p>
      <p v-else>
单据打印方式为自助打印，请您前往检测站单据打印处，使用自助打印一体机完成打印，共需打印单据2份，收据打印完成后请您按工作人员指示，前往上线进行检测。
      </p>
    </div>
    <van-button color="#27b5a7" to="/">返回首页</van-button>
  </div>
</template>

<script>
import { getDate } from '@/utils/index'
import AQrcode from '@/components/qrcode'

export default {
  name: 'printDetails',
  data() {
    return {
      carInfo: {},
      carNum:null,
      bQrUrl: null,
      isDrow: false,
      times: '',
      orderType:null,
      type:null,
      upTime:null,
      upTimeSub:null,
      createTime:null
    }
  },
  created() {
    if (!this.$route.query.id) {
      this.$router.go(-1)
    }
    this.type       = this.$route.query.type
    this.orderType  = this.$route.query.orderType
    this.upTime     = this.$route.query.times
    this.upTimeSub  = this.$route.query.timeSub
    this.createTime = this.$route.query.createTime
    this.$nextTick(() => {
      // let str = 'http://dccjyuyue.vaiwan.com/'
      //this.carInfo = this.$route.params.carInfo
      this.carNum = this.$route.query.carNum
      console.log(this.$route, '---------carInfo ----- ')
      this.times = getDate(new Date().getTime(), 'year')
      this.isDrow = true //控制二维码的显示隐藏

      //this.bQrUrl = `${this.$route.params.carInfo.id}`
      console.log(this.$route.query.id)
      //this.bQrUrl = `{id:${this.$route.query.id},createDate:${new Date().getTime()}}`
      this.bQrUrl = `${this.$route.query.id}`
      // this.handleQrcodeToDataUrl()

      document.getElementsByTagName('html')[0].style.backgroundColor = '#f5f6f5'
    })
  },
  components: {
    AQrcode
  },
  methods: {},
  beforeRouteLeave(to, from, next) {
    document.getElementsByTagName('html')[0].style.backgroundColor = '#fff'
    next()
  }
}
</script>

<style lang="less" scoped>
body {
  background-color: #f5f6f5;
}
.printDetails-wrap {
  .content {
    width: 84%;
    border-radius: 0.267rem;
    background-color: #fff;
    margin: 1.52rem auto 0;
    padding: 0.133rem 0 0.4rem;
    p {
      font-size: 0.4rem;
      line-height: 0.92rem;
      text-indent: 0.533rem;
    }
    /deep/ .qrcode_box {
      display: block;
      margin: 0.4rem auto;
      img {
        margin: 0.4rem auto;
        display: none;
      }
    }
  }
  .van-button {
    width: 84%;
    margin: 7% auto;
    display: block;
    border-radius: 0.267rem;
  }
}
.tips{
  width: 84%;
  margin:0 auto;
  line-height: 0.6rem;
  font-size: 0.4rem;
  color:red;
}
</style>
